<template>
	<view class="contents">
		<!-- 登录表单 -->
		<view class="submi-from">
			<!-- 手机号登录 -->
			<uni-row class="demo-uni-row">
				<uni-forms class="from" ref="valiForm" :rules="rules" :modelValue="formData">
					<uni-forms-item name="password">
						<uni-easyinput prefixIcon="locked" class="input" type="password" :inputBorder="false"
							v-model="formData.password" placeholder="请输入新密码" />
					</uni-forms-item>
					<uni-forms-item name="nwePassword">
						<uni-easyinput prefixIcon="locked-filled" class="input" type="password" :inputBorder="false"
							v-model="formData.nwePassword" placeholder="再次输入新密码" />
					</uni-forms-item>
					<uni-forms-item name="captcha">
						<uni-row class="demo-uni-row input">
							<uni-col :span="span">
								<uni-easyinput prefixIcon="code" :style="{color: 'black'}" type="number"
									:inputBorder="false" v-model="formData.captcha" placeholder="请输入验证码" />
							</uni-col>
							<uni-col :offset="2" :span="8" class="code" v-if="loginCode">
								<text @click="getTime">获取手机验证码</text>
							</uni-col>
							<uni-col :offset="2" :span="2" class="code" v-else>
								<text>{{setTime}}s</text>
							</uni-col>
						</uni-row>
					</uni-forms-item>
					<view class="pwd-text">
						<text>(8-16位数字和大小写字母)</text>
					</view>
				</uni-forms>
			</uni-row>
			<!-- d点击登录按钮 -->
			<uni-row class="demo-uni-row" style="margin-top: 30upx;">
				<button type="primary" @click="submit('valiForm')">保存</button>
			</uni-row>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				formData: {
					nwePassword: '',
					captcha: '',
					password: '',
				},
				user: {},
				loginCode: true,
				loginflag: false,
				setTime: 60,
				span: 14,
				topBackColor: "rgb(173, 173, 173)",
				// 校验规则
				rules: {
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入新密码!'
						}, {
							pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/,
							errorMessage: '8-16位数字和大小写字母！'
						}]

					},
					captcha: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码！'
						}, ]
					},
					nwePassword: {
						rules: [{
								required: true,
								errorMessage: '请再次输入新密码！'
							}, {
								pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/,
								errorMessage: '8-16位数字和大小写字母！'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									console.log('data', data)
									if (value != data.password) {
										callback('两次输入的密码必须相同')
									}
									return true
								}
							}
						]
					},
				}
			}
		},
		methods: {
			//提交短信登录
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.resetPassword(res)
				}).catch(err => {
					console.log('err', err);
				})
			},

			//获取短信验证码
			getTime() {
				//发送短信验证码
				this.validatePhone(this.user.telephone)
				// this.validatePhone("13161336162")
			},
			//验证手机号是否存在
			async validatePhone(phone) {
				const {
					status,
					data,
					msg
				} = await this.$api.user.validatePhone({
					phone: phone
				})
				if (status == 200) {
					this.loginCode = false
					this.topBackColor = "rgb(250,84,28)";
					this.span = 20;
					this.setTime = 60
					this.loginflag = true
					let time = setInterval(() => {
						if (this.setTime > 0) {
							this.setTime -= 1
						} else {
							this.loginCode = true
							this.setTime = 59
							this.span = 16;
							this.topBackColor = "rgb(173, 173, 173)";
							clearInterval(time)
						}
					}, 1000)
					//发送短信验证码
					this.verifyCode(phone)
				}
			},
			//发送短信验证码
			async verifyCode(phone) {
				try {
					const {
						status,
						data,
						msg
					} = await this.$api.user.verifyCode({
						phone: phone
					})
				} catch (e) {
					console.log(e)
				}
			},
			//重置密码
			async resetPassword(params) {
				const {
					status,
					data,
					msg
				} = await this.$api.user.resetPassword({
					telephone: this.user.telephone,
					captcha: params.captcha,
					password: params.password
				})
				if (status == 200) {
					uni.navigateBack()
					uni.$u.toast("修改成功!")
				} else {
					uni.$u.toast("验证码错误!")
				}
			}
		},
		onLoad() {
			this.user = this.$store.state.userInfo
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: white;
	}
	.contents {
		width: 100vm;
		height: 100vb;
		background-color: white;

		// 验证码样式
		.code {
			color: #FA541C;
			float: right;
		}

		//页面登录form表单样式
		.submi-from {
			width: 100%;
			height: 400upx;
			// margin-top: 30upx;
			padding-top: 100upx;

			//密码登录
			.pwd-text {
				float: right;
				height: 30upx;
				line-height: 30upx;
				// margin-top: 10upx;
				text-align: center;
				margin-right: 10upx;
				color: #9b9b9b;
			}

			//手机号。验证码输入框
			.input {
				border-bottom: 1px solid rgb(229, 229, 229);

				text {
					font-size: 28upx;
					height: 70upx;
					line-height: 70upx;
					float: left;
				}

			}

			.from {
				width: 90%;
				margin: auto;
			}

			button {
				width: 80%;
				margin: auto;
				background-color: #FA541C;
				border-radius: 46upx;
			}


		}

		//没有账号马上，注册
		.resgister-section {
			position: absolute;
			bottom: 50upx;
			width: 100%;
			text-align: center;

			text {
				color: #FA541C;
			}
		}
	}
</style>